<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form"  :inline="true" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="params.username" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input v-model="params.realName" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份选择">
              <el-select v-model="params.applyStatus">
                <el-option
                  v-for="item in StatusOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
            <!-- <el-button
              type="primary"
              @click="excelEvent"
              v-if="
                permissionJson.indexOf(
                  'AdminUserServerRewardProvider.exportServerPoint'
                ) != -1
              "
            >导出</el-button> -->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- table -->
    <div class="table" v-loading="tableLoading">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          align="center"
          :index="table_index"
          width="50"
        ></el-table-column>
        <el-table-column prop="realName" align="center" label="姓名"></el-table-column>
        <el-table-column prop="realName" align="center" label="手机号"></el-table-column>
        <el-table-column prop="nickname" align="center" label="身份"></el-table-column>
        <el-table-column prop="nickname" align="center" label="当月业绩"></el-table-column>
        <el-table-column prop="role" align="center" label="累计业绩"></el-table-column>
        <el-table-column prop="role" align="center" label="当月预计佣金"></el-table-column>
        <el-table-column prop="role" align="center" label="累计佣金"></el-table-column>
        <el-table-column prop="rewardAmount" align="center" label="可提现余额">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                toRoutes(
                  'plusWithdrawableBalanceInfo',
                  scope.row,
                )
              "
            >{{ scope.row.rewardAmount }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagesCon">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page_totals"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
  import { getList, excelExport } from "@/api/ServiceManagement";
  export default {
    name: "severaccount",
    data() {
      return {
        // loading层
        tableLoading: false,
        permissionJson: JSON.parse(localStorage.getItem("permissionJson")),
        //提交数据
        params: {
          pageNum: 1,
          pageSize: 10,
          username: "",
          realName: "",
          applyStatus: "0"
        },
        //table表数据
        tableData: [],
        //总条目数
        page_totals: 60,
        //身份选择下拉框 含发起人、联合发起人、城市合伙人
        StatusOption: [
          { id: "0", name: "全部" },
          { id: "1", name: "发起人" },
          { id: "2", name: "联合发起人" },
          { id: "3", name: "城市合伙人" },
        ]
      };
    },
    inject: ["reload"],
    mounted() {
      this.getList(this.params);
    },
    methods: {
      gojum(datas, amountType) {
        //列表页面
        //跳转到积分页面
        //type =1 金币 =2银币
        let type = 1;
        this.$router.push({
          name: "icons",
          query: { iconsId: datas.userId, type: type, amountType :amountType}
        });
      },
      table_index(index) {
        return (this.params.pageNum - 1) * this.params.pageSize + index + 1;
      },
      //列表
      getList(e) {
        this.tableLoading = true;
        const datas = e;
        getList(datas)
          .then(res => {
            console.log(res);
            if (!res.data.code) {
              this.tableData = res.data.data.rspDTOList;
              this.page_totals = res.data.data.count;
            } else {
              this.$message.error(res.data.msg);
            }
            this.tableLoading = false;
          })
          .catch(error => {
            this.$message.error(error);
            this.tableLoading = false;
          });
      },
      // 查询
      searchFn() {
        this.params.pageNum = 1;
        // console.log(this.params)
        this.getList(this.params);
      },
      //导出
      excelEvent() {
        let datas = { ...this.params };
        delete datas.pageNum;
        delete datas.pageSize;
        excelExport(datas).then(res => {
          exportfile(res);
        });
      },
      // 改变页面条数
      handleSizeChange(val) {
        // this.params.pageNum = 1;
        this.params.pageSize = val;
        this.getList(this.params);
      },
      // 选择页数
      handleCurrentChange(val) {
        this.params.pageNum = val;
        this.getList(this.params);
      },
      // 路由跳转
      toRoutes(e, username, type, userId) {
        console.log(username);
        const route = {
          name: e,
          query: { username: username, type: type, userId: userId }
        };
        this.$router.push(route);
      }
    }
  };
</script>
<style scoped>
  /* 分页 */
  .pagesCon {
    height: 40px;
    margin-top: 20px;
  }
  .pagesCon > div {
    float: right;
  }
</style>
